import React, { useEffect, useState } from "react";
import { Card, Row, Col, Space, Button, ButtonProps, Popover, InputNumber, Spin } from "antd";
import PreviewModal from "./components/PreviewModal";
import JsonDialog from "./components/JsonDialog";
import { usePrintDesigner } from "./hooks/usePrintDesigner";
import {
	AlignCenterOutlined,
	AlignLeftOutlined,
	AlignRightOutlined,
	ColumnHeightOutlined,
	ColumnWidthOutlined,
	DeleteOutlined,
	EyeOutlined,
	PrinterOutlined,
	SaveOutlined,
	VerticalAlignBottomOutlined,
	VerticalAlignMiddleOutlined,
	VerticalAlignTopOutlined,
	ZoomInOutlined,
	ZoomOutOutlined,
} from "@ant-design/icons";
import "./styles.module.css";

const PrintDesigner: React.FC = () => {
	const {
		loading,
		paperTypes,
		curPaperType,
		scaleValue,
		jsonDialogVisible,
		jsonOut,
		tidMode,
		beautify,

		setPaper,
		changeScale,
		setElsAlign,
		selectAll,
		preView,
		print,
		clearPaper,
		save,
		showJsonDialog,
		hiddenJsonDialog,
		onJsonModeChange,
		otherPaper,
		paperWidth,
		paperHeight,
		setPaperWidth,
		setPaperHeight,
	} = usePrintDesigner();

	const getButtonProps = (type: string): ButtonProps => ({
		size: "small",
		type: curPaperType === type ? "primary" : "default",
	});

	return (
		<Spin spinning={loading} tip="加载中..." size="large">
			<div style={{ marginBottom: 10 }}>
				<Space>
					{/* 纸张类型按钮组 */}
					<Button.Group>
						{Object.entries(paperTypes).map(([type, value]) => (
							<Button key={type} {...getButtonProps(type)} onClick={() => setPaper(type, value)}>
								{type}
							</Button>
						))}
						<Popover
							title="设置纸张宽高(mm)"
							content={
								<>
									<InputNumber
										value={paperWidth}
										onChange={(v) => setPaperWidth(v as string)}
										style={{ width: 100 }}
										placeholder="宽(mm)"
									/>
									<span style={{ margin: "0 8px" }}>×</span>
									<InputNumber
										value={paperHeight}
										onChange={(v) => setPaperHeight(v as string)}
										style={{ width: 100 }}
										placeholder="高(mm)"
									/>
									<Button type="primary" block onClick={otherPaper} style={{ marginTop: 8 }}>
										确定
									</Button>
								</>
							}
							trigger="click"
						>
							<Button size="small" type={curPaperType === "other" ? "primary" : "default"}>
								自定义纸张
							</Button>
						</Popover>
					</Button.Group>

					{/* 缩放按钮组 */}
					<Button.Group>
						<Button size="small" icon={<ZoomOutOutlined />} onClick={() => changeScale(false)} />
						<Button size="small" disabled style={{ width: 60 }}>
							{`${(scaleValue * 100).toFixed(0)}%`}
						</Button>
						<Button size="small" icon={<ZoomInOutlined />} onClick={() => changeScale(true)} />
					</Button.Group>

					{/* 对齐按钮组 */}
					<Button.Group>
						<Button size="small" icon={<AlignLeftOutlined />} onClick={() => setElsAlign("left")} />
						<Button size="small" icon={<AlignCenterOutlined />} onClick={() => setElsAlign("vertical")} />
						<Button size="small" icon={<AlignRightOutlined />} onClick={() => setElsAlign("right")} />
						<Button size="small" icon={<VerticalAlignTopOutlined />} onClick={() => setElsAlign("top")} />
						<Button size="small" icon={<VerticalAlignMiddleOutlined />} onClick={() => setElsAlign("horizontal")} />
						<Button size="small" icon={<VerticalAlignBottomOutlined />} onClick={() => setElsAlign("bottom")} />
						<Button size="small" icon={<ColumnWidthOutlined />} onClick={() => setElsAlign("distributeHor")} />
						<Button size="small" icon={<ColumnHeightOutlined />} onClick={() => setElsAlign("distributeVer")} />
					</Button.Group>

					{/* 操作按钮组 */}
					<Button.Group>
						<Button type="primary" icon={<EyeOutlined />} onClick={preView}>
							预览
						</Button>
						<Button type="primary" icon={<PrinterOutlined />} onClick={print}>
							打印
						</Button>
						<Button type="primary" onClick={selectAll}>
							全选元素
						</Button>
					</Button.Group>

					<Button.Group>
						<Button type="primary" icon={<SaveOutlined />} onClick={save}>
							保存
						</Button>
						<Button type="primary" danger icon={<DeleteOutlined />} onClick={clearPaper}>
							清空
						</Button>
					</Button.Group>

					<Button type="primary" onClick={showJsonDialog}>
						查看模板json
					</Button>
				</Space>
			</div>

			<Row gutter={20}>
				<Col span={4}>
					<Card style={{ height: "100vh" }}>
						<div className="rect-printElement-types hiprintEpContainer">{/* hiprint 会自动渲染元素类型列表 */}</div>
					</Card>
				</Col>
				<Col span={15}>
					<Card className="designArea">
						<div id="hiprint-printTemplate" className="hiprint-printTemplate" />
					</Card>
				</Col>
				<Col span={5}>
					<Card>
						<div id="PrintElementOptionSetting" />
					</Card>
				</Col>
			</Row>

			<PreviewModal />

			<JsonDialog
				visible={jsonDialogVisible}
				jsonOut={jsonOut}
				tidMode={tidMode}
				beautify={beautify}
				onClose={hiddenJsonDialog}
				onJsonModeChange={onJsonModeChange}
			/>
		</Spin>
	);
};

export default PrintDesigner;
